<!-- 求职用户行为量统计 -->
<template>
  <div class='behaviorStatisticsUsers'>
    <!-- 头部 -->
    <echartsHeader title="求职用户行为量统计" />
    <br />

    <div class="contents">

      <!-- 统计 块 -->
      <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">
        <el-col :span="4" v-for="(item,index) in arrNum" :key="index">
          <div class="grid-content bg-purple">
            <Statistics :title="item.title" :number="item.number" />
          </div>
        </el-col>
      </el-row>
      <br />

      <!-- 图表1 -->
      <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="注册量">
              <!-- id不要重复 -->
              <div id="registrationsLine"></div>
            </blockContent>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="登录量">
              <!-- id不要重复 -->
              <div id="personDailyCountLine"></div>
            </blockContent>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="填写/修改简历量">
              <!-- id不要重复 -->
              <div id="queryDailyCountLine"></div>
            </blockContent>
          </div>
        </el-col>
      </el-row>
      <br />
      <!-- 图表1 -->
      <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="投递量">
              <!-- id不要重复 -->
              <div id="queryCountDeliverLine"></div>
            </blockContent>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="收到面试邀请量">
              <!-- id不要重复 -->
              <div id="interviewCountLine"></div>
            </blockContent>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="聊天量">
              <!-- id不要重复 -->
              <div id="ec_6"></div>
            </blockContent>
          </div>
        </el-col>
      </el-row>
      <br />
    </div>
  </div>
</template>

<script>
// 引入封装插件，需求不够跟我说
import bus from '@/components/common/bus';
import { MyEcharts } from '@/components/page/DataCenter/utils/echart-utils'
import { queryDailyCount, queryCountDeliver, interviewCount, registrations, personDailyCount, chartPerson } from '@/api/enterpriseQuantityStatistics';
export default {
  components: {},
  data () {
    return {
      // 传递表格的数据
      // 折现
      // 填写/修改简历量
      Line: {
        legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: [120, 132, 1001, 134, 90, 230, 210, 1020, 132, 1001, 1304, 90, 230, 210, 120, 132, 1001, 134, 90, 2300, 210, 120, 1302, 1010, 134, 900, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 1232, 101, 1344, 90, 2530, 210, 1620, 132, 1071, 1342, 930, 230, 210]
          }
        ]
      },
      arrNum: [
        { title: '累计注册量', number: '0' },
        { title: '累计登录量', number: 0 },
        { title: '累计简历量', number: '0' },
        { title: '累计投递量', number: 0 },
        { title: '累计面试邀请量', number: 0 },
        { title: '累计聊天量', number: 0 }
      ],
      // 简历每日操作数据  
      queryDailyCountLine: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
      // 投递量按天分组  
      queryCountDeliverLine: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
      // 收到面试邀请量统计 按天分组 
      interviewCountLine: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
      // 登录量
      queryDailyCountLine: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
      // 注册量
      registrationsLine: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
      //  投递量按天分组
      personDailyCountLine: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
      // 求职用户行为量统计（聊天量）
      chartpersonLine: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    optionChart () {
      // 注册量
      let option_pie = MyEcharts.EchartsOption.Line('', '', this.registrationsLine)
      MyEcharts.initChart(option_pie, 'registrationsLine')
      //  投递量按天分组
      let option_pie2 = MyEcharts.EchartsOption.Line('', '', this.personDailyCountLine)
      MyEcharts.initChart(option_pie2, 'personDailyCountLine')

      //  简历每日操作数据  
      let option_pie3 = MyEcharts.EchartsOption.Line('', '', this.queryDailyCountLine)
      MyEcharts.initChart(option_pie3, 'queryDailyCountLine')

      // 登录量
      let option_pie4 = MyEcharts.EchartsOption.Line('', '', this.queryCountDeliverLine)
      MyEcharts.initChart(option_pie4, 'queryCountDeliverLine')

      // 收到面试邀请量统计 按天分组 
      let option_pie5 = MyEcharts.EchartsOption.Line('', '', this.interviewCountLine)
      MyEcharts.initChart(option_pie5, 'interviewCountLine')

      let option_pie6 = MyEcharts.EchartsOption.Line('', '', this.chartpersonLine)
      MyEcharts.initChart(option_pie6, 'ec_6')
    },
    // 简历每日操作数据  
    queryDailyCount () {
      return new Promise(resolve => {
        queryDailyCount().then(res => {
          if (res.success) {
            resolve(res.data);
          }
        })
      })
    },
    // 投递量按天分组  
    queryCountDeliver () {
      return new Promise(resolve => {
        queryCountDeliver().then(res => {
          if (res.success) {
            resolve(res.data);
          }
        })
      })
    },
    // 收到面试邀请量统计 按天分组 
    interviewCount () {
      return new Promise(resolve => {
        interviewCount().then(res => {
          if (res.success) {
            resolve(res.data);
          }
        })
      })
    },
    // 注册量
    registrations () {
      return new Promise(resolve => {
        registrations().then(res => {
          if (res.success) {
            resolve(res.data);
          }
        })
      })
    },
    // 登录量
    personDailyCount () {
      return new Promise(resolve => {
        personDailyCount().then(res => {
          if (res.success) {
            resolve(res.data);
          }
        })
      })
    },
    // 求职用户行为量统计（聊天量）
    chartPerson () {
      return new Promise(resolve => {
        let obj = {
          "area": null,
          "nature": null,
          "scale": null,
          "trade": null
        }
        chartPerson(obj).then(res => {
          if (res.success) {
            resolve(res.data);
          }
        })
      })
    },
    requestAll () {
      // 使用 Promise 为了更好的初始化实例
      Promise.all([this.queryDailyCount(), this.queryCountDeliver(), this.interviewCount(), this.registrations(), this.personDailyCount(), this.chartPerson()]).then((res) => {
        console.log(res, '返回数据');
        this.arrNum = [
          { title: '累计注册量', number: res[3].total },
          { title: '累计登录量', number: res[4].total },
          { title: '累计简历量', number: res[0].total },
          { title: '累计投递量', number: res[1].total },
          { title: '累计面试邀请量', number: res[2].total },
          { title: '累计聊天量', number: res[5].tota }
        ]
        // 0、简历每日操作数据 1、投递量按天分组  2、收到面试邀请量统计 按天分组 3、注册量  4、登录量
        // 简历每日操作数据 
        this.queryDailyCountLine.xAxis = res[0].date || []
        this.queryDailyCountLine.series[0].data = res[0].count || []

        // 1、投递量按天分组
        this.queryCountDeliverLine.xAxis = res[1].date || []
        this.queryCountDeliverLine.series[0].data = res[1].count || []

        // 2、收到面试邀请量统计
        this.interviewCountLine.xAxis = res[2].date || []
        this.interviewCountLine.series[0].data = res[2].count || []

        // 3、注册量
        this.registrationsLine.xAxis = res[3].date || []
        this.registrationsLine.series[0].data = res[3].count || []

        // 4、登录量
        this.personDailyCountLine.xAxis = res[4].date || []
        this.personDailyCountLine.series[0].data = res[4].count || []

        // 4、聊天量
        this.chartpersonLine.xAxis = res[5].date.reverse() || []
        this.chartpersonLine.series[0].data = res[5].count.reverse() || []


        this.optionChart()
      });
    }
  },
  created () {
    bus.$on('optionPiesSize', msg => {
      this.optionChart()
    });
  },
  mounted () {
    setTimeout(() => {
      this.requestAll()
    }, 500);
  },
  beforeCreate () { },
  beforeMount () {
  },
  beforeUpdate () { },
  updated () {

  },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.behaviorStatisticsUsers {
    background: #080850;
}
.contents {
    width: 96%;
    margin: 0 auto;
}
#registrationsLine {
    height: 270px;
}

#personDailyCountLine {
    height: 270px;
}

#queryDailyCountLine {
    height: 270px;
}

#queryCountDeliverLine {
    height: 270px;
}

#interviewCountLine {
    height: 270px;
}

#ec_6 {
    height: 270px;
}

#ec_7 {
    height: 270px;
}

#ec_8 {
    height: 270px;
}
#ec_9 {
    height: 270px;
}
#ec_10 {
    height: 270px;
}
</style>